<template>
  <div>
    <el-button @click="addInfoDialog = true"> <i class="el-icon-plus" /> 新建 </el-button>
    <!-- 表单区域 -->
    <el-table :data="data" style="width: 100%">
      <el-table-column type="index" label="序号" width="100" />
      <el-table-column prop="name" label="区域名称" />
      <el-table-column prop="nodeCount" label="点位数" />
      <el-table-column prop="remark" label="备注说明" />
      <el-table-column prop="addre" label="操作">
        <template #default="scoped">
          <el-link :underline="false" type="primary" @click.native="ViewDetailFn(scoped.row.name,scoped.row.id)">查看详情</el-link>
          <el-link :underline="false" type="primary" @click.native="revise(scoped.row.id)">修改</el-link>
          <el-link :underline="false" type="danger" @click.native="delFn(scoped.row.id)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 total接收的值必须为数字行否则会报错 -->
    <el-pagination
      style="margin-left: 70%;"
      background
      layout="prev, pager, next"
      :total="+pagInfo.totalCount"
      @current-change="handleCurrentChange"
    />
    <!-- 新增信息弹出框 -->
    <el-dialog
      title="新增区域"
      :visible.sync="addInfoDialog"
      width="40%"
      @close="closeInfo"
    >
      <el-form ref="addInfo" :model="addInfo" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="区域信息" prop="regionName">
          <el-input v-model.trim="addInfo.regionName" autocomplete="off" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="备注信息" prop="remark">
          <el-input
            v-model.trim="addInfo.remark"
            autocomplete="off"
            type="textarea"
            placeholder="请输入备注（40字以内）"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addInfoDialog = false">取消</el-button>
          <el-button @click="addFn">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 点击查看详情弹出框 -->
    <el-dialog
      title="区域详情"
      :visible.sync="seeDetails"
      width="50%"
    >
      <!-- 渲染信息 -->
      <el-row>
        <el-col :span="4">区域名称:</el-col>
        <el-col :span="20">{{ detailDialog.name }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="4">包含点位:</el-col>
        <el-col :span="20">
          <el-table :data="detailDialog.currentPageRecords" style="width: 100%">
            <el-table-column type="index" label="序号" width="100" />
            <el-table-column prop="name" label="点位名称" />
            <el-table-column prop="vmCount" label="设备数量" />
          </el-table>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="seeDetails = false">取 消</el-button>
        <el-button type="primary" @click="seeDetails = false">确 定</el-button>
      </span>
    </el-dialog>
    <!--修改表单信息-->
    <el-dialog
      title="修改区域"
      :visible.sync="modifyInfor"
      width="40%"
      @close="closeInfo"
    >
      <el-form ref="addInfo" :model="addInfo" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="区域信息" prop="regionName">
          <el-input v-model.trim="addInfo.regionName" autocomplete="off" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="备注信息" prop="remark">
          <el-input
            v-model.trim="addInfo.remark"
            autocomplete="off"
            type="textarea"
            placeholder="请输入备注（40字以内）"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="modifyInfor = false">取消</el-button>
          <el-button @click="reviseFn">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// 新增区域信息 , 点位详情
import { addANewRegionInfo, getPointInformation, modifyInformation, delInfomation } from '@/api'
export default {
  props: {
    // 接收表单信息
    data: {
      type: Array,
      default: () => {}
    },
    // 接收分页信息
    pagInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // 接收需要筛选出来的id
      userInfoId: '',
      // 控制修改区域弹出框
      modifyInfor: false,
      // 控制查看详情弹出框弹出
      seeDetails: false,
      // 接收点击查看详情后渲染的弹出框数据
      detailDialog: {},
      // 控制新增信息弹出框弹出
      addInfoDialog: false,
      addInfo: {
        regionName: '',
        remark: ''
      },
      // 配置兜底校验
      rules: {
        regionName: [{ required: true, trigger: blur, max: 15 }],
        remark: [{ required: true, trigger: blur, max: 40 }]
      }
    }
  },
  methods: {
    // 分页器的页数发生改变的生命周期函数
    handleCurrentChange(val) {
      this.$emit('setPage', val)
    },
    // 新增信息按钮
    addFn() {
      this.$refs.addInfo.validate(async valid => {
        if (!valid) return
        await addANewRegionInfo(this.addInfo)
        this.$emit('addInfo')
        this.addInfoDialog = false
      })
    },
    // 关闭弹窗的回调，重置表单，和表单信息
    closeInfo() {
      this.$refs.addInfo.resetFields()
      this.addInfo.regionName = ''
      this.addInfo.remark = ''
    },
    // 查看详情信息
    async ViewDetailFn(name, id) {
      const res = await getPointInformation({
        pageIndex: this.pagInfo.pageIndex,
        pageSize: this.pagInfo.pageSize,
        regionId: id
      })
      this.detailDialog = { ...res, name }
      console.log(this.detailDialog)
      this.seeDetails = true
    },
    // 点击修改传值
    revise(id) {
      this.userInfoId = id
      const info = this.data.filter(item => item.id === id)
      // console.log(this.data.filter(item => item.id === id))
      console.log(info)
      this.addInfo.regionName = info[0].name
      this.addInfo.remark = info[0].remark
      console.log(this.addInfo.name)
      console.log(this.addInfo.remark)
      this.modifyInfor = true
    },
    // 修改信息
    async reviseFn() {
      await modifyInformation(this.userInfoId, this.addInfo)
      this.$emit('addInfo')
    },
    // 删除信息
    async delFn(id) {
      await delInfomation(id)
      this.$emit('addInfo')
    }
  }
}
</script>

<style scoped lang="scss">
.el-button {
  background-color: #8e76a2;
  color:#fff;
  border: 1px solid #fff;
}
.el-link{
  margin-left: 20px;
  color: #8a789f;
}
.el-link:hover{
  color: #000;
}

::v-deep .el-dialog{
  border-radius: 10px !important;
  overflow: hidden;
}
::v-deep .el-table td, .el-table th.is-leaf{
  border-bottom: 0px solid #000 !important;
}
.el-pagination{
  margin-top: 20px;
}
::v-deep .active{
  background-color: #8e76a2 !important;
}
::v-deep .el-dialog__header{
  background-color: #fff;
}
::v-deep .el-dialog__title{
  color: #000;
}
.el-col{
  line-height: 64px;
}
</style>
